<!-- 搜索 -->
<template>
  <el-tabs class="search-tabs" v-model="activeName" @tab-change="handleOnChange" type="demo-tabs">
    <!--    <el-tab-pane label="总平" name="zongping">-->
    <el-tab-pane name="zongping">
      <template #label>
        <span
          >总平
          <el-tooltip effect="light" placement="bottom">
            <template #content>
              <div class="tooltip-content">
                {{ tooltips.PROJECT_ACHIEVEMENT_GENERAL_PLAN }}
                <el-link type="primary" @click.stop="openEditDialog('PROJECT_ACHIEVEMENT_GENERAL_PLAN')" class="edit-link">修改</el-link>
              </div>
            </template>
            <el-icon class="tip-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </span>
      </template>
      <ZongpingView v-if="activeName === 'zongping'" :layerContainer="layerContainer" />
    </el-tab-pane>

    <!--    <el-tab-pane label="验收" name="yanshou">-->
    <el-tab-pane name="yanshou">
      <template #label>
        <span
          >验收
          <el-tooltip effect="light" placement="bottom">
            <template #content>
              <div class="tooltip-content">
                {{ tooltips.PROJECT_ACCEPTANCE  }}
                <el-link type="primary" @click.stop="openEditDialog('PROJECT_ACCEPTANCE')" class="edit-link">修改</el-link>
              </div>
            </template>
            <el-icon class="tip-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </span>
      </template>
      <YanshouView v-if="activeName === 'yanshou'" />
    </el-tab-pane>

    <!--    <el-tab-pane label="单体" name="danti">-->
    <el-tab-pane name="danti">
      <template #label>
        <span
          >单体
          <el-tooltip effect="light" placement="bottom">
            <template #content>
              <div class="tooltip-content">
                {{ tooltips.PROJECT_ACHIEVEMENT }}
                <el-link type="primary" @click.stop="openEditDialog('PROJECT_ACHIEVEMENT')" class="edit-link">修改</el-link>
              </div>
            </template>
            <el-icon class="tip-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </span>
      </template>
      <DantiView v-if="activeName === 'danti'" />
    </el-tab-pane>
  </el-tabs>

    <div class="map-legend" v-if="activeName === 'zongping'">
      <div class="layer-checks1" v-for="item in layerContainer" :key="item.name" style="margin-bottom: 2px">
        <el-checkbox v-model="item.isChecked">{{ item.label }}</el-checkbox>
          <el-image v-if="item.name ===''" class="legend_zp" :src="legend_zp1" fit="contain" />
          <el-image v-if="item.name ==='_ys'" class="legend_ys" :src="legend_ys" fit="contain" />
          <el-image v-if="item.name ==='_dt'" class="legend_dt" :src="legend_dt" fit="contain" />
      </div>
<!--      <div class="layer-checks2">-->
<!--        <el-checkbox v-model="item.isChecked" :key="item.name" :label="item.label">-->
<!--          <div><el-image v-if="item.name ==='_ys'" class="legend_ys" :src="legend_ys" fit="contain" /></div>-->
<!--        </el-checkbox>-->
<!--      </div>-->
<!--      <div class="layer-checks3">-->
<!--        <el-checkbox v-model="item.isChecked" :key="item.name" :label="item.label">-->
<!--          <el-image v-if="item.name ==='_dt'" class="legend_dt" :src="legend_dt" fit="contain" />-->
<!--        </el-checkbox>-->
<!--      </div>-->
<!--      <div><el-image class="legend_zp" :src="legend_zp" fit="contain" /></div>-->
<!--      <div><el-image class="legend_dt" :src="legend_ys" fit="contain" /></div>-->
<!--      <div><el-image class="legend_ys" :src="legend_dt" fit="contain" /></div>-->
    </div>


  <!-- 编辑弹窗 -->
  <el-dialog
    v-model="editDialog.visible"
    title="修改提示内容"
    width="500px"
  >
    <el-input
      v-model="editDialog.content"
      type="textarea"
      :rows="4"
      placeholder="请输入新的提示内容"
    />
    <template #footer>
      <el-button @click="editDialog.visible = false">取消</el-button>
      <el-button type="primary" @click="saveContent">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,onMounted } from "vue";
import YanshouView from "./YanshouView.vue";
import DantiView from "./DantiView.vue";
import ZongpingView from "./ZongpingView.vue";
import legend_zp1 from "@/assets/legend_zp1.png";
import legend_ys from "@/assets/legend_ys.png";
import legend_dt from "@/assets/legend_dt.png";
import { QuestionFilled } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus"
import {getTableMetaInfo,updateTableMetaInfo} from "@/api/statisticApi.js"

const activeName = ref("zongping");
var url2 = "http://192.168.88.177:8090/iserver/services/map-tpk-GongChengChengGuo_ZongPing/rest/maps/%E5%B7%A5%E7%A8%8B%E6%88%90%E6%9E%9C_%E6%80%BB%E5%B9%B3"


const layerContainer = ref([
    {
    name:"",
    label:"总平",
    isChecked:true,
    tableName:"PROJECT_ACHIEVEMENT_GENERAL_PLAN",
  },
  {
    name:"_ys",
    label:"验收",
    isChecked:true,
    tableName:"PROJECT_ACCEPTANCE"
  },
  {
    name: "_dt",
    label: "单体",
    isChecked: true,
    tableName: "PROJECT_ACHIEVEMENT"
  }
]);

const handleOnChange = () => {
  layerContainer.value = [
    {
      name:"",
      label:"总平",
      isChecked:true,
      tableName:"PROJECT_ACHIEVEMENT_GENERAL_PLAN",
    },
    {
      name:"_ys",
      label:"验收",
      isChecked:true,
      tableName:"PROJECT_ACCEPTANCE"
    },
    {
      name: "_dt",
      label: "单体",
      isChecked: true,
      tableName: "PROJECT_ACHIEVEMENT"
    }
  ]
  window.map.eachLayer(function (layer) {
    if (!layer._url ||  (  layer._url && layer._url===url2)) {
      window.map.removeLayer(layer);
    }
  });
}
// 工具提示数据
const tooltips = ref({
  PROJECT_ACHIEVEMENT_GENERAL_PLAN: "总平数据：规划用地面积、总建筑面积（2024年）",
  PROJECT_ACCEPTANCE: "验收数据：验收面积、通过率（2024年）",
  PROJECT_ACHIEVEMENT: "单体数据：楼层数、建筑高度（2024年）"
});

// 编辑对话框状态
const editDialog = ref({
  visible: false,
  currentKey: '',
  content: ''
});

// 打开编辑对话框
const openEditDialog = (key) => {
  editDialog.value = {
    visible: true,
    currentKey: key,
    content: tooltips.value[key]
  };
};

// 保存修改内容
const saveContent = async () => {
  try {
    let sendData = {
      table_name: "",
      table_meta_info: editDialog.value.content
    }
    switch (editDialog.value.currentKey) {
      case "PROJECT_ACHIEVEMENT_GENERAL_PLAN":
        sendData.table_name = "工程成果_总平"
        break;
      case "PROJECT_ACCEPTANCE":
        sendData.table_name = "工程成果_验收"
        break;
      case "PROJECT_ACHIEVEMENT":
        sendData.table_name = "工程成果_单体"
        break;
    }

    updateTableMetaInfo(sendData).then(res=>{
      if(res.data.code===0){
        ElMessage.success('修改成功');
        updateMetaInfo()
      }else{
        ElMessage.error('保存失败: ' + res.data.message);
      }
    })
    editDialog.value.visible = false;
  } catch (error) {
    ElMessage.error('保存失败: ' + error.message);
  }
};

const updateMetaInfo = ()=>{
  for(let i =0;i<layerContainer.value.length;i++){
    getTableMetaInfo(layerContainer.value[i].tableName).then(res=>{
      tooltips.value[layerContainer.value[i].tableName] = res.data.data.table_meta_info
    })
  }
}

onMounted(() => {
  updateMetaInfo()
})
</script>

<style>
.search-tabs {
  height: 100%;
}

.map-legend {
  position: absolute;
  bottom: 60px;
  right: 20px;
  height: 250px;
  z-index: 999;
  width: 130px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-tabs > .el-tabs__content {
  padding-top: 20px;
}

.el-tabs--bottom > .el-tabs__header .el-tabs__item:last-child,
.el-tabs--top > .el-tabs__header .el-tabs__item:last-child {
  padding-right: 20px !important;
}

.el-tabs--bottom > .el-tabs__header .el-tabs__item:nth-child(2),
.el-tabs--top > .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 20px !important;
}

.el-tabs__nav {
  width: 100%;
}

.el-tabs__item {
  width: 33%;
}

.el-tabs__item.is-active {
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-top: 2px solid rgba(107, 119, 140, 0.2);
  border-left: 2px solid rgba(107, 119, 140, 0.2);
  border-right: 2px solid rgba(107, 119, 140, 0.2);
}

.search-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.tip-icon {
  color: #909399;
  font-size: 16px !important;
  cursor: help;
  transition: all 0.3s;
  top: 3px;
}

.tip-icon:hover {
  color: #409eff;
  transform: scale(1.2);
}

.tooltip-content {
  max-width: 300px;
  line-height: 1.5;
}

.edit-link {
  margin-left: 0px;
  margin-top: 0px;
  font-size: 10px;
  vertical-align: baseline;
}
.legend_zp {
  width: 120px;
  height: auto;
  left: 20px;
  flex-shrink: 0;
}
.legend_ys {
  width: 100px;
  height: auto;
  left: 20px;
  flex-shrink: 0;
}
.legend_dt {
  width: 100px;
  height: auto;
  left: 20px;
  flex-shrink: 0;
}

</style>
